<template>
  <div class="attention-info">
    <div class="attention-student clearfix">
      <h4><span v-text="name"></span>： <span v-text="rate"></span>%</h4>
      <a :href="href_set" class="statistics-details fr">详情</a>
    </div>
    <mt-progress :value="rate"></mt-progress>
    <div class="attention-nums clearfix">
      <span data-name="ygz" class="fl">
        已关注:
        <span id="teac_bind" v-text="follows">-</span>人
      </span>
      <span class="fr">
        剩余:
        <span id="teac_unbind" v-text="unfollows">-</span>人
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "FollowItem",
  props: ["name", "href", "follows", "unfollows"],
  computed: {
    rate() {
      let all = +this.follows + +this.unfollows;
      window.console.log(all);
      return all == 0 ? 0 : Math.round((this.follows / all) * 10000) / 100;
    }
  },
  filters: {
    href(val) {
      return val == "" ? "javascript:;" : val;
    }
  }
};
</script>

<style lang="scss" scoped>
.attention-info {
  padding: 0.64rem 0 1.12rem 0;
}

.attention-student {
  margin-bottom: 0.3rem;
}

.attention-student h4 {
  display: inline-block;
}
.attention-nums {
  color: #999;
  margin-top: 0.27rem;
}
.mt-progress {
  height: 0;
}
</style>
